<template>
  <el-card class="card-box">
    <div slot="header" class="clearfix">
      <span>{{ cardName }}</span>
    </div>
    <el-rate v-model="countRate"></el-rate>
    <div class="el-button1">
      <el-button
        type="warning"
        icon="el-icon-plus"
        circle
        @click="add"
        :disabled="addButtonDisable"
      ></el-button>
      <el-button
        type="danger"
        icon="el-icon-minus"
        circle
        @click="sub"
        :disabled="subButtonDisable"
      ></el-button>
    </div>
  </el-card>
</template>

<script>
    export default {
        data() {
            return {
                value: null
            }
        },
        props: {
            cardName: {
                type: String,
                default: "卡片名称"
            },
            countRate: {
                type: Number,
                default: 3
            }
        },
        methods: {
            // 执行父组件的add方法,也可以通过$emit传值给父组件
            add() {
                this.$emit('add');
            },
            // 执行父类的sub,父类的sub执行的vuex里的actions异步方法,延迟1秒
            sub() {
                this.$emit('sub')
            }
        },
        computed: {
            // 如果达到峰值禁用
            addButtonDisable() {
                return this.countRate === 5
            },
            subButtonDisable() {
                return this.countRate === 0
            }
        }
    }
</script>

<style lang="scss" scoped>
  .card-box {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    .el-button1{
      margin: 20px auto;
      width: 50%;
      display: flex;
      justify-content: space-around;
    }
  }

</style>
